<template>
  <div>
    <div v-show="!htImgShow">
      <p>{{noHtInfo}}</p>
    </div>

    <div style="width:960px;height:600px;" v-show="htImgShow" >
      <div v-show="qrqsShow" style="text-align: center">
        <a-button @click="qrqs" class="ant-btn ant-btn-primary" style="margin-bottom: 5px;">确认签署</a-button>
      </div>

      <a-spin tip="签署中，请稍等..." :spinning="qsspinning">
        <a-modal
          title="验证码"
          :visible="visibleYzm"
          @ok="saveCode"
          @cancel="yzmClose"
        >
          <a-form-item label="请输入验证码" :labelCol="{ xs: { span: 23 }, sm: { span: 6 }}" :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 }}">
            <a-input  v-model="smscode"/>
          </a-form-item>
        </a-modal>
      </a-spin>

      <iframe style="width: 100%;height: 100%;" :src="htImgUrl"></iframe>

    </div>
  </div>

</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import ARow from 'ant-design-vue/es/grid/Row'
  import store from '@/store'

  export default {
    name: 'ImagPreview',
    components: {
      ARow
    },
    data() {
      return {
        htImgShow: false,
        qrqsShow: true,
        noHtInfo: '',
        htImgUrl: '',
        spinning: false,
        qsspinning: false,
        visibleYzm: false,
        smscode: '',

        //数据集
        dataSource: [{
          key:0,
          fileDetails:[
          ]
        },{
          key:1,
          fileDetails:[
          ]
        },{
          key:2,
          fileDetails:[
          ]
        }
        ],
        url: {
          queryByUsername: "/corpinfo/lhygCorpinfo/queryByUsername",
          qrqsByLoginname: "/corpinfo/lhygCorpinfo/qrqsByLoginname",
          sendYam: "/corpinfo/lhygCorpinfo/sendYam",
        }
      }
    },

    created () {
      this.getHt();
    },
    methods: {
      //读取合同信息
      getHt() {
        const that = this;
        let loginname = store.getters.userInfo.username;
        //loginname = '18888888888';//测试数据
        getAction(this.url.queryByUsername,{username: loginname}).then((res)=>{
          if(res.success){
            const result = res.result;
            if(result.status == "0"){
              this.$message.warning("企业信息审核未通过，不能签署合同！");
              this.noHtInfo = "企业信息审核未通过，不能签署合同！";
              this.htImgShow = false;
            } else if(result.status == "1"){
              this.$message.warning("企业信息审核中，暂时不能签署合同！");
              this.noHtInfo = "企业信息审核中，暂时不能签署合同！";
              this.htImgShow = false;
            } else if(result.status == "3"){
              //已签署合同,直接展示
              this.htImgUrl = result.htdz;
              this.htImgShow = true;
              this.qrqsShow = false;
            }else if(result.status == "2"){
              //待签署状态,需要先生成合同展示
              this.htImgUrl = result.htdz;
              this.htImgShow = true;
              this.qrqsShow = true;
            }
          }
        })
      },

      //确认签署,发送验证码,弹出验证码
      qrqs() {
        const that = this;
        this.visibleYzm = true;
        let loginname = store.getters.userInfo.username;
        //loginname = '18888888888';//测试数据
        getAction(this.url.qrqsByLoginname,{username: loginname}).then((res)=>{
          if(res.success){
            //location.reload();
            //that.yzmOpen();
          }else {
            this.visibleYzm = false
            that.$message.error(res.message)
          }
        })
      },

      //确认提交验证码
      saveCode(){
        const that = this;
        let loginname = store.getters.userInfo.username;
        //loginname = '18888888888';//测试数据
        that.visibleYzm = false;
        that.qsspinning = true;
        getAction(that.url.sendYam, {yzm:that.smscode, username: loginname}).then((res) => {
          if (res.success){
            that.$message.success("签署成功");
            that.qsspinning = false;
            location.reload();
          }else{
            that.qsspinning = false;
            that.$message.error(res.message)
          }
        });
      },

      yzmOpen(){
        this.visibleYzm = true
      },

      yzmClose(){
        this.visibleYzm = false
      },
    }
  }
</script>
<style scoped>
  .table-operator {
    margin-bottom: 10px
  }

  .clName .ant-tree li span.ant-tree-switcher, .ant-tree li span.ant-tree-iconEle {
    width: 10px !important;
  }

  .clName .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #1890FF !important;
  }
</style>